<template>
    <div class="bod">
        <div class="HarvestAddress" @click="Addresshref" v-if="0<Address_list.length">
            <p class="yuseName">收货人:{{Address_list[0].userName}}<span> {{Address_list[0].mobile}}</span></p>
            <p class="Address">
                <img src="../../../assets/personal/images/add-icons2.png">收获地址:{{Address_list[0].province}} {{Address_list[0].city}} {{Address_list[0].district}} {{Address_list[0].address}}<img src="../../../assets/personal/images/694485431459622997.png" v-show="false
           ">
            </p>
            <img class="fengexian" src="../../../assets/personal/images/fengexian.png">
        </div>
        <div class="HarvestAddress" @click="Addresshref" v-else-if="addID">
            <p class="yuseName">收货人:{{Address_list.userName}}<span> {{Address_list.mobile}}</span></p>
            <p class="Address">
                <img src="../../../assets/personal/images/add-icons2.png">收获地址:{{Address_list.province}} {{Address_list.city}} {{Address_list.district}} {{Address_list.address}}<img src="../../../assets/personal/images/694485431459622997.png" v-show="false
            ">
            </p>
            <img class="fengexian" src="../../../assets/personal/images/fengexian.png">
        </div>
        <div class="HarvestAddress" @click="Addresshref" v-else>
            <p class="yuseName">收货人: 未填写 <span></span></p>
            <p class="Address"><img src="../../../assets/personal/images/add-icons2.png">收获地址:请填写收获地址<img src="../../../assets/personal/images/694485431459622997.png"></p>
            <img class="fengexian" src="../../../assets/personal/images/fengexian.png">
        </div>
        <div class="shops" v-for="(itemshops,ind) in chkedlist" :key="ind">
            <div class="shops_name">
                <img src="../../../assets/personal/images/shopslogo.png"> {{itemshops.companyName}} <img src="../../../assets/personal/images/694485431459622997.png">
            </div>
            <div class="goodes" v-for="itemsgood in itemshops.goodsList" :key="itemsgood.goodsId">
                <div class="goodes_left">
                    <img :src="itemsgood.goodsThum">
                </div>
                <div class="goodes_right">
                    <p>{{itemsgood.goodsName}}</p>
                    <h1>&nbsp;</h1>
                    <div v-if="1==itemsgood.discount">
                        <span>售价 <b>￥{{itemsgood.goodsScreenPrice | amountMin100(2)}}</b> </span>
                        <s>原价 ￥{{itemsgood.goodsRealPrice | amountMin100(2)}}</s>
                    </div>
                    <div v-else>
                        <span>售价 <b>￥{{itemsgood.goodsScreenPrice | amountMin100(2)}}</b> </span>
                    </div>
                    <span style="padding-left:67%">X {{itemsgood.goodsNumber}}</span>
                </div>
                <div class="clefix"></div>
            </div>
            <div class="Discount">
                <ul>
                    <li v-if="1==itemshops.hasDiscount">店铺优惠: <span>您所购买的特价商品， 不能与全店满减同享</span> &nbsp; &nbsp;</li>
                    <li v-else-if="0<itemshops.couponList.length" @click="youhuei(itemshops.companyId,itemshops.goodsList,ind)">
                        店铺优惠: 
                        <span v-if="itemshops.counponid" style="color:#333; margin-left:18px;">已使用 满{{itemshops.counponreach  | amountMin100(2)}}减{{itemshops.counponscore | amountMin100(2)}}</span>
                        <span v-else>查看店铺优惠(如条件满足已自动领取)</span>
                        
                    </li>
                    <li v-else>店铺优惠: <span>店家暂无优惠</span></li>
                    <li>买家留言:<textarea id="inputFunc" v-model="itemshops.message" ></textarea></li>
                </ul> 
                <div class="youheiquan" @click="youhuei" v-show="companyId==itemshops.companyId">
                    <div class="youhuiquan1">
                        <h1>优惠券</h1>
                        <h2>可使用优惠券</h2>
                        <div class="context">
                            <div class="bg_yhp" v-for="itemcouponList in itemshops.couponList" :key="itemcouponList.id" @click="lingququan(itemcouponList.id)">
                                <div class="bg_yhp_left">
                                    <p>￥<span>{{itemcouponList.score1 |amountMin100(2)}}</span> 满{{itemcouponList.reach1 |amountMin100(2)}}元可用</p>
                                    <p>优惠券不可叠加使用（单次消费限1张）</p>
                                </div>
                                <div class="bg_yhp_right">
                                    <p v-if="itemshops.shopamount>=itemcouponList.reach1">已自动领取</p>
                                    <p v-else>未满足条件</p>
                                </div>
                                <div class="clefix"></div>
                            </div>
                        </div>
                        <div class="shuoming">
                            <p>说明：达到金额后自动领取最高优惠券使用无需领取</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clefix"></div>
        </div>
        <div class="payment">
            <h1 class="payment_typ">支付方式</h1>
            <ul class="paymentType">
                <li class="border" @click="Redenvelopes(1)" >
                    <div class="paymentType_left">
                        <img src="../../../assets/personal/images/hongbao.png">
                        <h1>红包支付</h1>
                        <h2>当前￥{{userScore |amountMin100(2)}}</h2>
                    </div>
                    <div class="paymentType_right">
                        <div class="money">
                            -￥{{hongbaochajia |amountMin100(2)}}
                            <div class="chak" :class="{chak_avti:1==hongbaoType}"></div>
                        </div>
                    </div>
                </li>
                <li @click="Redenvelopes(2)">
                    <div class="paymentType_left">
                        <img src="../../../assets/personal/images/chat-icon1.png">
                        <h1>微信支付</h1>
                        <h2>微信钱包</h2>
                    </div>
                    <div class="paymentType_right">
                        <div class="money">
                            -￥{{hongbaoyichu |amountMin100(2)}}
                            <div class="chak"   :class="{chak_avti:1==weixinType}"></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="clefix"></div>
        </div>
        <div class="footer">
            <strong>合计：<i class="total" id="AllTotal">{{totoAmount|amountMin100(2)}}</i></strong>
            <a class="settlement" @click="settlement">结算 ({{totnum}})</a>
            <div class="clefix"></div>
        </div>
    </div>
</template>
<style scoped>
#inputFunc{
    
    width: 286px;
    height: 25px;
    vertical-align: middle;
    margin-top: 10px;
    border: none;
}
.paymentType{
    background: white;
}
    .shuoming {
        text-align: center;
        margin-top: 70px;
    }

    .context {
        height: 285px;
        overflow: scroll;
    }

    .bg_yhp_right p {
        margin-right: 15px;
        color: white;
        margin-top: 27px;
    }

    .bg_yhp_right {
        float: right;
    }

    .bg_yhp_left p span {
        font-size: 25px;
    }

    .bg_yhp_left p:nth-of-type(2) {
        margin-top: 5px;
        font-size: 8px;
        margin-bottom: 14px;
    }

    .bg_yhp_left p:nth-of-type(1) {
        padding-top: 20px;
    }

    .bg_yhp_left {
        margin-left: 15px;
        color: white;
        float: left;
    }

    .bg_yhp {
        background: url("../../../assets/personal/images/bg_hb.png")no-repeat no-repeat;
        background-size: 100% 100%;
        margin: 10px 15px;
    }

    .youhuiquan1 h2 {
        font-size: 16px;
        margin-left: 15px;
    }

    .youhuiquan1 h1 {
        font-size: 16px;
        padding: 15px 0;
        margin-left: 45%;
    }

    .youhuiquan1 {
        width: 100%;
        height: 70%;
        background: white;
        position: fixed;
        top: 30%;
    }

    .youheiquan {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0,0,0.5);
        top: 0;
        left: 0;
        z-index: 100
    }

    .bod {
        width: 100%;
        height: 100%;
        padding-top: 6.5px;
    }

    .HarvestAddress {
        margin-bottom: 15px;
    }

    .yuseName {
        padding: 0 16px;
        font-size: 16px;
        line-height: 32px;
        text-align: left;
    }

    .Address {
        text-align: left;
        padding: 0 16px;
        color: #bcbcbc;
        width: 100%;
        overflow: hidden;
    }

        .Address img:nth-of-type(1) {
            width: 12.5px;
            height: 17px;
            vertical-align: middle;
            margin-right: 15px;
        }

        .Address img:nth-of-type(2) {
            width: 10px;
            height: 15px;
            vertical-align: middle;
        }

    .fengexian {
        margin-top: 15px;
    }

    .shops {
        width: 100%;
        background: white;
        text-align: left;
        padding: 13px 0;
    }

    .shops_name {
        padding: 0 16px 10px 16px;
        border-bottom: 1px solid #e5e5e5;
    }

        .shops_name img:nth-of-type(1) {
            width: 22.5px;
        }

        .shops_name img:nth-of-type(2) {
            width: 10px;
            height: 15px;
            vertical-align: middle;
        }

    .goodes {
        padding: 12px 16px;
        overflow: hidden;
        background: white;
        border-bottom: 1px solid #e5e5e5;
    }

    .goodes_left {
        width: 80px;
        height: 86px;
        float: left;
    }

        .goodes_left img {
            width: 100%;
            height: 100%;
        }

    .clefix {
        clear: both;
    }

    .goodes_right {
        width: 345px;
        margin-left: 5px;
        font-size: 14px;
    }

        .goodes_right h1 {
            font-size: 11px;
            line-height: 20px;
            color: #e5e5e5;
        }

        .goodes_right div span:nth-of-type(1) {
            color: red;
            font-weight: bold;
            font-size: 12px;
        }

        .goodes_right s {
            color: #a7a7a7;
        }

        .goodes_right div span:nth-of-type(2) {
            float: right;
            color: #a7a7a7;
        }

    .Discount {
        width: 100%;
        padding: 0 16px;
        background: white;
    }

        .Discount ul li {
            font: 13px black;
            width: 100%;
            line-height: 42px;
            border-bottom: 1px solid #e5e5e5;
        }

            .Discount ul li span {
                color: #a7a7a7;
            }

            .Discount ul li img {
                width: 8px;
                height: 10px;
                vertical-align: middle;
            }

            .Discount ul li input {
                width: 80%;
                border:1px solid #fff;
                background: none;
                height: 18px;
            }

    .payment {
        width: 100%;
        text-align: left;
        margin-bottom: 50px;
    }

    .payment_typ {
        margin-left: 16px;
        font-size: 15px;
        padding: 13px 0;
        color: #a7a7a7;
    }

    .paymentType_left {
        margin-left: 15px;
        width: 40%;
    }

        .paymentType_left img {
            float: left;
            width: 29px;
            height: 29px;
            margin-right: 8px;
        }

    .paymentType li {
        padding: 15px 0;
        background: white;
    }

    .paymentType_left h1 {
        font-size: 15px;
        line-height: 6px;
    }

    .paymentType_left h2 {
        line-height: 30px;
        font-size: 11px;
        margin-top: 6px;
        color: #949494;
    }

    .border {
        border-bottom: 1px solid #e5e5e5;
    }

    .money {
        position: relative;
        right: 10px;
        top: -35px;
    }

    .paymentType_right {
        float: right;
    }

    .chak {
        width: 20px;
        height: 20px;
       
        float: right;
        margin: 0 10px;
        border-radius: 50%;
        background: url("../../../assets/personal/images/choose-icon-active.png") no-repeat no-repeat;
        background-size: 100% 100%;
    }

    .footer {
        width: 100%;
        background: white;
        padding: 10px 0;
    }

        .footer strong {
            display: block;
            font-size: 12px;
            color: #999999;
            font-weight: normal;
            margin-left:50%;
            text-align: right;
            width: 40px;
            float: left;
        }

    #AllTotal {
        display: block;
        font-size: 0.8rem;
        color: #ff0808;
        font-weight: bold;
        position: relative;
        left: -0.3rem;
        text-align: center;
    }

    .settlement {
        color: #fff;
        background: #ff0808;
        width: 4rem;
        height: 1.8rem;
        border-radius: 5px;
        line-height: 1.8rem;
        font-size: 14px;
        text-align: center;
        margin-right: 1rem;
        display: block;
        float: right;
    }

    .i_mages {
        position: relative;
        right: -170px;
    }
    .chak_avti{
        width: 20px;
        height: 20px;
       
        float: right;
        margin: 0 10px;
        border-radius: 50%;
        background: url("../../../assets/personal/images/bsgg.png") no-repeat no-repeat;
        background-size: 100% 100%
    }
</style>
<script>
    export default {
        data() {
            return {
                ceshi: this.$route.query.orderJson,
                chkedlist: [],
                Address_list: [],
                addID: this.$route.query.addID,
                youhuei_style: false,
                companyId: '',
                couponListid: '',
                mun_comp: [],
                userScore:'',
                hongbaoType:1,
                hongbaochajia:0,//红包差价
                hongbaoyichu:0,//红包超出
                weixinType:1,//微信TYPE
                orderType:'',
                userId:'',
                addressId:'',
                message:'',
                orderId:''
            }
    },
        beforeCreate() {
            if (!window.localStorage.chkedlist) {
                this.$router.push({ name: 'Index' })
            }
        },
        created() {
            //  console.log(this.chkedlist=window.localStorage.chkedlist)
           
            let artmp= JSON.parse(window.localStorage.chkedlist);
            artmp.forEach(element => {
                element.message=""
            });     
            this.chkedlist  = artmp;
            
            console.log(this.chkedlist)
        },
        mounted() {
            this.Address()
            this.loadwalletinfo()
        },
        methods: {
            lingququan: function (id) {
                this.couponListid = id
            },
            youhuei: function (comid, goodsList, ind) {//优惠券
                this.companyId = comid
                this.youhuei_style = !this.youhuei_style
            },
            Addresshref: function () {
                this.$router.push({ name: 'addaddress' })
            },
            // /api/wap/receivingAddress 地址列表
            Address() {
                if (this.addID) {
                    this.$http.get(this.APIURL_PREFIX + '/api/wap/receivingAddressById', { params: { id: this.addID } }).then((response) => {
                        this.Address_list = response.data.data
                        this.addressId=this.addID
                        console.log(this.addressId)
                    }).catch(function (err) {
                        console.log(err)
                    });
                } else {
                    this.$http.get(this.APIURL_PREFIX + '/api/wap/receivingAddress', { params: { addressType: 1 } }).then((response) => {
                        this.Address_list = response.data.data
                        this.addressId=this.Address_list[0].id
                        console.log( this.Address_list[0].id)
                    }).catch(function (err) {
                        console.log(err)
                    });
                }
            },
            loadwalletinfo: function () {//钱包
                this.$http.get(this.APIURL_PREFIX + "/api/wallet").then((response) => {
                    this.userScore=response.data.data.userScore
                    this.userId=response.data.data.userId
                    console.log(this.userScore)
                    this.hongbaotype()
                }).catch(function (err) {
                    console.log(err)
                });
            },
            hongbaotype(){
                 if(this.userScore>this.totoAmount){
                    this.hongbaoType=2;
                    this.hongbaochajia=this.totoAmount
                 }
            },
            Redenvelopes:function(typ){//红包
             if(1==typ){
               if(1==this.hongbaoType){
                   if(this.userScore==0){
                       console.log("等于0")
                   }else{
                        this.hongbaoType=2
                   console.log("选中")
                   if(this.userScore<this.totoAmount){
                        console.log("选中_1")
                     this.hongbaochajia=this.userScore
                     this.hongbaoyichu=this.totoAmount-this.userScore
                     if(this.hongbaoyichu>0){
                         this.weixinType=2
                          console.log("选中_3")
                     }else{
                         this.weixinType=1
                          console.log("选中_4")
                     }
                   }else{
                    if(this.userScore>this.totoAmount){
                        this.weixinType=1
                        console.log("选中_2")
                     }
                        console.log("选中_5")
                     this.hongbaochajia=this.totoAmount
                     this.hongbaoyichu=0
                   }                          
                   }
                  
               }else{ 
                   this.hongbaoType=1
                   this.hongbaochajia=0; 
                   this.weixinType=2          
                   this.hongbaoyichu=this.totoAmount         
                   console.log("进来了"+this.hongbaoyichu)        
               }
             }else{
              if(1==this.weixinType){
                if(this.userScore>this.totoAmount&&this.hongbaoType==2){
                    this.weixinType=1
                    if((this.userScore-this.totoAmount)>0){
                       this.hongbaoType=1
                       this.weixinType=2  
                       this.hongbaoyichu=this.totoAmount
                       this.hongbaochajia=0
                    }
                }else{
                   this.weixinType=2           
                   console.log("选中+1" +"sss"+this.hongbaoType)
                   if(1==this.hongbaoType){
                       this.hongbaoyichu=this.totoAmount
                   }     
                }                              
               }else{ 
                   this.weixinType=1
                   this.hongbaochajia=0;    
                   if (this.hongbaoyichu>0){
                      console.log("超出了")
                      if(1==this.hongbaoType){
                      }else{
                        this.hongbaochajia=this.userScore
                        this.weixinType=2 
                      }                     
                   }else{
                       this.weixinType=1 
                       this.hongbaoyichu=0
                       this.hongbaochajia=this.totoAmount                     
                   }               
                   console.log("进来了+2"+this.hongbaoyichu)        
               }
             }
            },
            settlement:function(){//结算
                if(this.hongbaoType==1 && this.weixinType==1){
                   layer.msg("请选择支付方式")
                }else{
                    var newarr=[]
                    var counponid="NO"
                    var chkedlist=this.chkedlist
                    var memberPrice_s=0
                    chkedlist.forEach(function(item){
                        if(0!=item.counponid){
                            counponid="Yes"
                        }
                        console.log(item.message)
                        memberPrice_s+=item.counponscore
                        newarr.push({companyid:item.companyId,companyName:item.companyName,companyHeadimg:item.headimgurl,amount:item.shopamount,favorablePrice:item.counponscore,discountId:item.counponid,goodsList:item.goodsList,message:item.message})                  
                   })
                    if(2==this.weixinType&&1==this.hongbaoType&&"NO"==counponid){
                       this.orderType=1
                       console.log("现金")
                     }else if(2==this.hongbaoType&&1==this.weixinType&&"NO"==counponid){
                       this.orderType=2
                       console.log("红包")
                    }else if(2==this.weixinType&&2==this.hongbaoType&&"NO"==counponid){
                       this.orderType=3
                       console.log("红包+现金")
                    }else if(2==this.weixinType&&2==this.hongbaoType&&"Yes"==counponid){
                       this.orderType=4
                       console.log("红包+现金+优惠")
                    }else if(2==this.weixinType&&"Yes"==counponid&&1==this.hongbaoType){
                       this.orderType=5
                       console.log("现金+优惠")
                    }else if(2==this.hongbaoType&&"Yes"==counponid&&1==this.weixinType){
                       this.orderType=6
                        console.log("红包+优惠")
                    }
                    console.log(this.orderType)
                    console.log(newarr)
                    if(this.addressId==""){
                        layer.msg("请填写收货地址")
                        return;
                    }
                    console.log(this.hongbaoyichu)
                    this.$http.post(this.APIURL_PREFIX+"/api/wap/order",$.param({
                        "orderJson":JSON.stringify(newarr),
                        amountMoney:this.hongbaoyichu,
                        fk:"1-35-"+this.userId+"-0",
                        memberPrice:memberPrice_s,
                        addressId:this.addressId,
                        amountScore:this.hongbaochajia,
                        type:this.orderType,
                        orderAmount:this.totoAmount+memberPrice_s,
                        isShare:0,//localStorage.isShare
                        // shareId:localStorage.fk
                        shareId:0
                        })).then((response) => {
                            
                        if(0==this.userScore){
                             this.hongbaoType=1
                        }
                        window.localStorage.buynowid = "";
                        if(response.data.code == 0){
                           window.location = '/wap/pay_gxtscan1.html?orderid='+response.data.data.orderId+'&ordertype=1';
                        }
                        else{
                            layer.msg("提交失败")
                        }
                        
                        // if(2==this.weixinType&&1==this.hongbaoType){//现金
                        // console.log(this.totoAmount)
                        // var mo=this.totoAmount/100
                        // mo=mo.toFixed(2)
                        // console.log(mo)
                        //    window.location='/wap/redenvelopes_wx.html?id='+response.data.data.orderId+"&Amount="+mo+"&type=2"
                        // }else{
                        //    // window.location='/wap/redenvelopes.html?Amount='+this.totoAmount+"id="+response.data.data.orderId+"amountScore="+this.userScore
                        //    window.location='/wap/redenvelopes.html?id='+response.data.data.orderId+"&Amount="+this.totoAmount+"&amountScore="+this.userScore+"&type=1"
                        //   //  this.$router.push({name:'redenvelopes',query:{id:response.data.data.orderId,Amount:this.totoAmount,amountScore:this.userScore}})
                        // }
                    }).catch(function(err){
                      console.log(err)
                    })                
                }
            }
        },
        computed: {
            totnum: function () {
                console.log(111);
                let num = 0;
                this.chkedlist.forEach(function (v) {
                    num += v.goodsList.length
                })
                return num;
            },
            totoAmount: function () {
                let amount = 0
                this.chkedlist.forEach(function (v) {
                    v.goodsList.forEach(function (vv, ii) {
                        amount += vv.goodsNumber * vv.goodsScreenPrice
                    })
                    amount -= v.counponscore
                })
                return amount
            }
        }
    }
</script>

